<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      label-width="150px"
      ref="form"
      class="kylin-form"
    >
      <el-form-item :label="$t('patch.cve_group_name')" prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label="$t('patch.CVE_number')" prop="cve">
        <virtual-list
          :value="form.cve"
          size="small"
          class="size"
          :multiple="true"
          :list="cves"
          @selectValue="handleSelectCve"
          :obj="true"
        ></virtual-list>
      </el-form-item>
      <el-form-item
        :label="$t('configure.ascription')"
        prop="ascription"
        v-if="!row_id"
      >
        <el-select v-model="form.ascription" size="small" class="size">
          <el-option
            v-for="item in ascriptions"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('description')" prop="description">
        <el-input v-model="form.description" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
      <el-button class="kylin-button" @click="handleOk">{{
        $t("save")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import virtualList from "@/components/virtualList";
import {
  getCveList,
  createCveGroup,
  getGroupCve,
  updateCveGroup,
} from "@/api/cve_group";
import { getDepartments } from "@/api/user";
export default {
  components: {
    virtualList,
  },
  data() {
    return {
      form: {
        name: "",
        cve: [],
        ascription: "",
        description: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: this.$t("patch.cve_group_name_required"),
            trigger: "change",
          },
        ],
        cve: [
          {
            required: true,
            message: this.$t("patch.cve_require"),
            trigger: "change",
          },
        ],
        ascription: [
          {
            required: true,
            message: this.$t("configure.ascription_require"),
            trigger: "change",
          },
        ],
      },
      cves: [],
      ascriptions: [],
    };
  },
  props: {
    row_id: {
      type: String | Number,
    },
  },
  methods: {
    handleSelectCve(value) {
      this.form.cve = value;
    },
    handleCancel() {
      this.$refs.form.resetFields();
      this.$emit("click");
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.row_id) {
            updateCveGroup({
              id: this.row_id,
              groupName: this.form.name,
              cveIds: this.form.cve,
              description: this.form.description,
            }).then((res) => {
              if (res.data.code === "0") {
                this.$message({
                  type: "success",
                  message: res.data.message,
                });
                this.$emit("click", "success");
                this.$refs.form.resetFields();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            });
          } else {
            createCveGroup({
              departmentId: this.form.ascription,
              groupName: this.form.name,
              cveIds: this.form.cve,
              description: this.form.description,
            }).then((res) => {
              if (res.data.code === "0") {
                this.$message({
                  type: "success",
                  message: res.data.message,
                });
                this.$emit("click", "success");
                this.$refs.form.resetFields();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            });
          }
        }
      });
    },
  },
  mounted() {
    getDepartments().then((res) => {
      this.ascriptions = res.data.data;
    });
    getCveList({ paged: false }).then((res) => {
      let cves = [];
      res.data.data.results.forEach((item) => {
        cves.push({
          id: item.cveId,
          name: item.cveId,
        });
      });
      this.cves = cves;
    });
    if (this.row_id) {
      getGroupCve(this.row_id).then((res) => {
        let data = res.data.data;
        this.form.name = data.groupName;
        this.form.cve = data.cveStr;
        this.form.description = data.description;
      });
    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.size {
  width: 100%;
}
</style>